﻿<script>
    var objectname = '@ViewData["name"]';

    $(document).ready(function () {
        getData('/m/sp_getContentTypeHeader', '', populateNav, false, '', $('#nav').find('div.data'), "Manage/d");
        //getData('/m/usp_sd_getViewHeader', '', populateNav, false, '', $('#nav').find('div.view'), "Manage/v");
        getData('/m/sp_getStoredProcedureHeader', '', populateNav, false, '', $('#nav').find('div.methods'), "Manage/m");

        initNav($('#nav'), 'div.nav-category', 'h3');
                
        $("#filterText").keyup(function (event) {
            if (event.keyCode == 13) {
                $("div.filter-button").click();
            }
        });
    });

    var grid_item_html = '<div class="grid-item grid-item-bar">' +
                    '<div class="left-padding">' +
                    '</div>' +
                    '<div class="checkbox">' +
                    '    <input type="checkbox" class="checkbox" /></div>' +
                    '<div class="grid-item-content-area">' +
                    '<div class="grid-item-left-tag-area">' +
                    '    <div class="id-tag">' +
                    '        ##0##</div>' +
                    '</div>' +
                    '<div class="grid-item-title-area">' +
                    '    ##2##</div>' +
                    '<div class="grid-item-date-area">' +
                    '    ##1##</div>' +
                    '</div></div>';

    function populateNav(data, selector, action) {
        // Show loading animation

        $.each(data, function (i, item) {
            var entryClass = 'nav-entry';
            if (item.name === objectname)
                entryClass += ' current';

            var item_html = "<a class='" + entryClass + "' href='/" + action + "/" + item.name + "'><span>" + item.name + "</span></a>";
            selector.append(item_html);
        });
    }

    function showLoadingAnimation(innercontainer) {
        innercontainer.html('<div class="loading-results">Loading Results</div>');
    }

    function insertData(data, innercontainer) {
        innercontainer.html('<div class="no-data">No Data To Show</div>');

        if (data.error) {
            $('.error-message').html('Error: ' + data.error);
            return;
        }

        innercontainer.html('');

        $.each(data, function (i, item) {
            var item_html = grid_item_html;
            var count = 0;
            for (var key in item) {
                item_html = item_html.replace('##' + count++ + '##', item[key]);
            }
            innercontainer.append(item_html);
        });
    }
</script>

<h2>My Data</h2>
<div id="gridUI" class="grid-height">
    @*<div id="newDataButton"><span>New</span></div>*@
    <div id="nav" class="sidebar grid-height">
        <div class="nav-items-list">
            <div class="nav-item">
                <h3>Data</h3>
                <div class="nav-category data">
                </div>
            </div>
            <div class="nav-item">
                <h3>Views</h3>
                <div class="nav-category views">
                </div>
            </div>
            <div class="nav-item">
                <h3>Methods</h3>
                <div class="nav-category methods">
                </div>
            </div>
        </div>
    </div>
    <div id="grid" class="grid-width">
        <div id="grid-container" class="grid-width">
            <div id="grid-inner-container" class="grid-width">
                <div class="grid-control-bar grid-width">
                    <div class="grid-control-buttons" grid-width>
                        <div class="left-padding">
                        </div>
                        <input type="checkbox" class="selectall" />
                        <div class="grey-item grey-button refresh-button image-button" tip="Refresh">Refresh</div>
                        <input type="text" rows="30" id="filterText" class="grey-item" />
                        <div class="global-buttons"></div>
                        <div class="edit-buttons"></div>
                        <div class="yellow-message">
                        </div>
                    </div>
                </div>
                <div class="error-message"></div>
                <div class="grid-items-list grid-height grid-width">                    
                    <div class="no-data">No Data To Show</div>
                </div>
            </div>
        </div>
    </div>
    <div id="viewer" class="grid-height">
        <div id="view-items-list" class=""></div>
    </div>
</div>
<div>
    <div id="editor"></div>
</div>